<template>
  <div>
    <div class="midd">
      <el-tabs type="border-card" style="height: 825px;">
        <div class="menuList">
          <el-tabs type="border-card">
            <el-tab-pane label="制作视频">
              <el-card class="box-card">
                <div slot="header" class="clearfix" style="text-align: left">
                  <div style="float:left">
                    <i class="el-icon-video-camera-solid"></i>
                    <span>学院视屏</span>
                  </div>
                </div>
                <div class="listB">
                  <div
                    class="block"
                    v-for="item of collegeList"
                    :key="item.index"
                    @click="lookWk(item.wk_id)"
                  >
                    <img :src="item.wk_pic" class="imgColl" />
                     
                    <p class="demonstration">
                      <b style="width:155px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis" :title="item.wk_name">{{item.wk_name}}</b>
                      <span>{{item.wk_create_time}}</span>
                    </p>
                  </div>
                </div>
              </el-card>
            </el-tab-pane>
          </el-tabs>
          <el-dialog
            :visible.sync="centerDialogVisible"
            :before-close="closeCPediet"
            width="40%"
            center
            :closeOnClickModal="false"
            title="添加学院制作视频"
          >
            <el-form
              :model="collegeFrom"
              ref="collegeFrom"
              label-width="100px"
              class="demo-ruleForm"
              style="width:95%"
            >
              <el-form-item label="微课名称" prop="wkName">
                <el-input v-model="collegeFrom.wkName"></el-input>
              </el-form-item>

              <el-form-item label="微课封面">
                <input type="file" accept="image/*" ref="file" @change="picChange($event)" />
              </el-form-item>
              <el-form-item label="微课视频">
                <input type="file" ref="file" @change="videoChange($event)" />
              </el-form-item>
              <el-form-item label="微课简介" prop="wkIntro">
                <el-input type="textarea" v-model="collegeFrom.wkIntro"></el-input>
              </el-form-item>
              <el-form-item
                style="margin-left: -100px!important;display: flex;justify-content: center;"
              ></el-form-item>
            </el-form>
          </el-dialog>
          <el-dialog
            :title="detailCollage.wk_name"
            :visible.sync="disPlay"
            width="50%"
            center
            :before-close="closeDetail"
          >
            <div class="evamine">
              <p>
                微课名称：
                <b>{{detailCollage.wk_name}}</b>
                ——
                <b style="color:blue">{{detailCollage.category_name}}</b> 类
              </p>
              <p>
                <video
                  :src="detailCollage.wk_video_adress"
                  controls
                  id="a1_html5_api"
                  preload="auto"
                ></video>
              </p>
              <p style="text-indent:2em;">{{detailCollage.wk_introduce}}</p>
            </div>
          </el-dialog>
        </div>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      collegeList: [], //学院
      centerDialogVisible: false,
      disPlay: false,
      collegeFrom: { wkName: "", wkIntro: "" },
      collegeId: "",
      user: {},
      picFile: {},
      videoFile: {},
      detailCollage: {}
    };
  },
  mounted() {
    this.user = JSON.parse(this.$cookie.get("userAdmin"));
    this.getCollege();
  },
  methods: {
    //微课列表 ————学院制作
    getCollege() {
      var that = this;
      that.$axios
        .get("apis/admin/wklist")
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              var dataLiat = res.data.data;
              var college = [];
              for (var i = 0; i < dataLiat.length; i++) {
                dataLiat[i].wk_create_time = that
                  .$moment(dataLiat[i].wk_create_time)
                  .format("YYYY-MM-DD");
                if (dataLiat[i].category_name == "学院制作") {
                  college.push(dataLiat[i]);
                  that.collegeId = dataLiat[i].category_id;
                }
              }
              that.collegeList = college;
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //添加 上传微课制作视频
    openCollege() {
      var that = this;
      that.centerDialogVisible = true;
    },
    closeCPediet() {
      this.centerDialogVisible = false;
    },
    lookWk(id) {
      ////console.log(id);
      var that = this;
      that.disPlay = true;
      var dataL = that.collegeList;
      var detailC = {};
      for (var i = 0; i < dataL.length; i++) {
        if (dataL[i].wk_id == id) {
          detailC = dataL[i];
        }
      }
      that.detailCollage = detailC;
    },
    closeDetail() {
      var video = document.getElementById("a1_html5_api");
      video.pause(); //暂停控制
      this.disPlay = false;
    }
  }
};
</script>

<style lang="less" scoped>
.midd {
  width: 1200px;
  margin: 10px auto;
  .block {
    width: 100%;
    .el-image {
      width: 100%;
      height: 300px;
    }
  }
  .menuList {
    height: 810px;
    .el-card {
      width: 100% !important;
    }
    .text {
      font-size: 14px;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both;
    }

    .box-card {
      width: 480px;
    }
    .listB {
      text-align: left;
      .block {
        width: 20.5%;
        display: inline-block;
        margin: 10px;
        .el-image {
          width: 100%;
        }
        .demonstration {
          display: flex;
          justify-content: space-between;
          line-height: 30px;
          font-size: 12px;
        }
        .imgColl{
          width: 226px;
          height: 164px;
        }
      }
    }
    .evamine {
      width: 90%;
      margin: 0 auto;
      p {
        text-align: left;
        line-height: 40px;
        video {
          width: 100%;
        }
      }
      div {
        width: 40%;
        margin: 20px auto;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>